<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>加载进度条</title>
</head>
<body>
<ul id="skill">
    <li ><span class="bar graphic-design"></span><h3>Graphic Design</h3></li>
    <li><span class="bar html-css"></span><h3>Html // Css</h3></li>
    <li><span class="bar jquery"></span><h3>jQuery // MoTools</h3></li>
    <li><span class="bar wordpress"></span><h3>Wordpress</h3></li>
</ul>
<style>
    .jquery{
        width: 25%;
        background-color: blueviolet;
        animation: jquery 5s;
    }
    @keyframes jquery {
        from{
            width: 0%;
        }
        to{
            width: 25%;
        }
    }
    .wordpress{
        width: 75%;
        background-color: #888888;
        animation: wordpress 5s;
    }
    @keyframes  wordpress{
        from{
            width: 0%;
        }
        to{
            width: 75%;
        }

    }

    .html-css{
        width: 50%;
        background-color: yellowgreen;
        animation: html-css 5s;
    }
    @keyframes html-css {
        from{
            width: 0%;
        }
        to{
            width: 50%;
        }

    }
    body{

    }
    #skill{
       position: relative;

        list-style-type: none;
        width: 296px;
        margin: 50px auto 0;



    }
    #skill li{

        height:20px;
        border-radius:10px;
        box-shadow: 0 1px 0px #bebbb9 inset, 0 1px 0 #fcfcfc;
    }
     .graphic-design{
        background-color: red;
         animation: graphic-design  5s;
         width: 100%;
    }
    #skill h3{
        position: relative;
        top:-25px
    }
    .bar{
        height: 18px ;
        margin: 1px 2px;
        position: absolute;
        border-radius: 10px;

    }
   @keyframes graphic-design {
      from{
          width: 0%;
      }
       to{
           width: 100%;
       }
   }



</style>
</body>
</html>